﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Easyui扩展库 选择框 - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/selector/common/jeasyui.extensions.dialog.sealed.sample.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/selector/common/jeasyui.extensions.selector.base.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/selector/jeasyui.extensions.selector.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/selector/jeasyui.extensions.selector.singleDatagrid.js"></script>
    <script>
    $(function () {
        var single = true;

        $("#btn2").click(function () {
            $("#ID").textbox("setValue", "");
            $("#Name").textbox("setValue", "");
            single = $.string.toBoolean($("[name='ss']:checked").val());
            $("#spanSingle").text(single ? "单选" : "多选");
        });

        function fill(data) {
            if (!data) { return; }
            if ($.isArray(data)) {
                $("#ID").textbox("setValue", $.array.map(data, function (item) { return item.ID }).join(","));
                $("#Name").textbox("setValue", $.array.map(data, function (item) { return item.RealName }).join(","));
            } else {
                $("#ID").textbox("setValue", data.ID);
                $("#Name").textbox("setValue", data.RealName);
            }
        }

        $("#btn1").click(function () {

            var selected = $("#ID").textbox("getValue");

            var dia = $.easyui.showSelector.singleDatagrid({
                title: "测试选择",
                width: 400,
                height: 250,
                onEnter: function (row) {
                    fill(row);
                },
                extToolbar: false,
                selected: selected,
                datagridOptions: {
                    singleSelect: single,
                    method: "get",
                    url: "datagrid-selector-data.json",
                    idField: 'ID',
                    columns: [[
                        { field: 'ID', title: '工号', width: 90 },
                        { field: 'RealName', title: '姓名', width: 90 },
                        { field: 'Remarks', title: '备注', width: 150 }
                    ]]
                }
            });
        });

    });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false,title:'本演示是简易版，不支持扩展的toolbar插件'" style="padding:20px;">
        选中项的Value：<input type="text" id="ID" name="ID" class="easyui-textbox" data-options="width:350,multiline:true,height:40" />
        <br /><br />
        选中项的Text：<input type="text" id="Name" name="Name" class="easyui-textbox" data-options="width:350,multiline:true,height:40" />
        <br />
        <br />
        <div style="border:1px solid red;width:500px;height:80px;text-align:center;padding:4px;line-height:40px;">
            <input type="radio" id="ss1" name="ss" checked="checked" value="true" /><label for="ss1">单选</label>
            <input type="radio" id="ss2" name="ss" value="false" /><label for="ss2">多选</label>
            <span style="color:red;font-weight:bold;">单/多选设置，只有通过以下按钮设置后才有效。</span>
            <br />
            <a id="btn2" class="easyui-linkbutton" data-options="iconCls:'icon-add'">清空已选信息并设置选择框的单/多选</a>
        </div>
        <br />
        <a id="btn1" class="easyui-linkbutton" data-options="iconCls:'icon-add'">打开singleDatagrid选择框</a>
        当前选择框为<span id="spanSingle" style="color:red;font-weight:bold;">单选</span>
    </div>
</body>
</html>
